<script setup lang="ts">
import { ref, watch } from 'vue'
// import type { CardProps } from 'vant'
import { useScrollEvent } from '@/utils/hooks/scrollEvent'
import { throttle } from '@/utils'
import SelectMenu from './components/SelectMenu.vue'

let num = ref(10)
const { docBottomSide, dpr } = useScrollEvent()

const loadData = throttle(() => {
  console.log('开始加载')
  setTimeout(() => {
    num.value += 10
  }, 500)
}, 1000)

watch(docBottomSide, (val, oldVal) => {
  // 优化：还需要加上正在加载中时 再次触发loadData不执行
  if (oldVal >= val && docBottomSide.value / dpr.value <= 400) {
    loadData()
  }
})

</script>
<template>
  <div class="search-page">
    <!-- 顶部栏 -->
    <van-nav-bar fixed placeholder>
      <template #title>
        <div class="head-tool-bar">
          <van-icon @click="$router.back()" name="arrow-left" />
          <van-field placeholder="搜索商品" right-icon="search" clearable />
        </div>
        <SelectMenu />
      </template>
    </van-nav-bar>
    <van-card
      v-for="item in num"
      :key="item"
      @click="$router.push('/product/1')"
      tag="标签"
      price="2.00"
      desc="描述信息"
      title="商品标题"
      thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
      origin-price="10.00"
      lazy-load
    />
    <van-back-top />
  </div>
</template>
<style lang="scss" scoped>
.search-page {
  :deep(.van-nav-bar) {
    height: 188px;
    .van-nav-bar__content {
      height: 100%;
    }
  }
  :deep(.van-dropdown-menu__bar) {
    box-shadow: none !important;
  }
  :deep(.van-nav-bar__title) {
    margin: 0;
    width: 100%;
    max-width: 100% !important;
    .van-field {
      border: 2px solid #9d9d9d;
      padding: 3px 15px;
      width: 80vw;
      border-radius: 30px;
    }
    .head-tool-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      /* height: 100%; */
      margin: auto 30px;
    }
  }
  :deep(.van-card) {
    margin-top: 0px;
  }
}
</style>